<!--
 * @Author: Cenven
 * @Date: 2021-06-29 17:15:14
 * @Description: 北京泓深教育发展有限公司
 * @Descripttion: 
 * @version: @Lastest
 * @LastEditTime: 2021-06-30 15:00:29
 * @CopyRight: 北京泓深教育发展有限公司
-->
<template>
  <div class="question-information">
    <div class="information_detail">
      <h1>{{article_obj.title}}</h1>
      <div class="date-source">
        <span>{{formatDate(article_obj.createTime)}}</span>
        <span class="author">发布者：{{article_obj.userName}}</span>
      </div>
      <div class="introduce ql-snow">
        <div class="ql-editor" v-html="article_obj.content"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from "vuex";
import {getExamInfoById,saveTestInfoStatus } from "~/api/v2-question-bank/question-bank.js";
export default {
  name: "question-information",
  components: {},
  data() {
    return {
      article_obj:{}
    };
  },
  computed: {
    ...mapState({
      user_info(state) {
        return state.user_info;
      },
      token(state) {
        return state.token;
      },
      question_record_list(state) {
        return state.questionBank.question_record_list;
      },
      kl_md(state) {
        return state.kl_md;
      }
    }),
    /* 文章Id */
    notice_id() {
      return this.$route.query.id;
    },
  },
  
  watch: {},
  methods: {
    ...mapMutations([
      "SET_IS_LOADING",
    ]),
    formatDate(timestamp) {
      let date = new Date(timestamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hour = date.getHours();
      let minute = date.getMinutes();
      let second = date.getSeconds();
      let add0 = m => {
        return m < 10 ? "0" + m : m;
      };
      let showTime = null;
      if (new Date(timestamp).toDateString() === new Date().toDateString()) {
        if (hour < 10) {
          showTime = "上午";
        } else if (hour < 12) {
          showTime = "中午";
        } else if (hour < 18) {
          showTime = "下午";
        } else {
          showTime = "晚上";
        }
        // console.log("今天", showTime + " " + add0(hour) + ":" + add0(minute));
        return showTime + " " + add0(hour) + ":" + add0(minute);
      } else {
        // console.log("以前", add0(year) + "/" + add0(month) + "/" + add0(day));
        return add0(year) + "年" + add0(month) + "月" + add0(day) + "日";
      }
    },
    /* 获取新版题库资讯 */
    async getExamInfoOne() {
      this.SET_IS_LOADING(true);
      let params = {
        id:this.notice_id
      }
      if (this.token && Object.keys(this.user_info).length > 0) {
        params = {
          ...params,
          userId: this.user_info.id
        }
      }
      let result = await getExamInfoById(params);
      console.log("新版题库资讯:", result);
      if (result && result.data && result.data.code == 200) {
        const { data } = result.data;
        this.article_obj = data;
        if (this.token && Object.keys(this.user_info).length > 0 && data.isRead != 1) {
          this.saveTestInfoStatus();
        }
      }
      this.SET_IS_LOADING(false);
    },
    /* 题库考试资讯更改状态 未读 为 已读 */
    async saveTestInfoStatus(){
      let params = {
        informationId:this.notice_id,
        userId: this.user_info.id
      }
      let result = await saveTestInfoStatus(params);
      if (result && result.data && result.data.code == 200) {
        
      }
    },
    
  },
  created() {
    this.getExamInfoOne();
  },
  mounted() {}
};
</script>
<style lang="scss">
.question-information {
  @import "assets/css/richtext.scss";
}
</style>
<style lang="scss" scoped>
.question-information {
  width: 100%;
  min-height: 100vh;
  background: #fff;
  //   padding: 40px 0;
  .information_detail {
    width: 1000px;
    margin: 0 auto;
    h1 {
      padding: 40px 0;
      font-size: 30px;
    }
    .date-source {
      line-height: 16px;
      padding: 24px 0;
      font-size: 16px;
      color: #888;
      border: 1px solid #e5e5e5;
      border-width: 1px 0;
      .author {
        color: #141b23;
        padding: 0 12px;
      }
    }
    .introduce{
        margin-top: 20px;
    }
  }
}
</style>
